/*hNsiw3GmfpTzM9YJXqEkw2kI37eS3uYRkVh9ldHIvGRwHWoFSXDX/QBVFRQandV9*/

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { HotKeys } from "react-hotkeys";

/**
 * TODO
 *
 * 可能要解决的问题  1、左右滚动  2、多选
 *
 *
 * @description 修饰器  用于修饰pagination  使其获得快捷键的能力
 * @param  {...any} params
 */
function hotkeys(...params) {
    let hotKeyboard = !!params[0];

    let { ...others } = params[1] || {};

    return function(WrappedComponent) {
        const defaultProps = {};
        class WrappedPagination extends Component {
            constructor(props) {
                super(props);
                this.state = {};
            }
            /**
             * 获取可以滚动的元素
             */
            getScrollParent(direction) {
                let node = document.body,
                    current = ReactDOM.findDOMNode(this.wrapped);
                // getBoundingClientRect
                if (this.hasScrolled(current, direction)) {
                    return current;
                }

                while (!this.hasScrolled(current, direction)) {
                    current = current.parentElement;
                }

                return current || node;
            }

            /**
             * 滚动到指定元素
             */
            scrollToElement() {
                let scrollElem = this.getScrollParent();
                let activeElemRect = document.activeElement.getBoundingClientRect();
                let scrollElemRect = scrollElem.getBoundingClientRect();
                // scrollTo ie 并不支持
                // scrollElem.scrollTo({top: activeElemRect.top - scrollElemRect.top})
                scrollElem.scrollTop = activeElemRect.top - scrollElemRect.top;
            }

            /**
             * 左右方向的滾動
             * @param {*} direction
             */
            scrollOnHorizontal(direction = "right") {
                let scrollElem = this.getScrollParent("horizontal"),
                    scrollElemWidth = scrollElem.clientWidth,
                    scrollElemScrollWidth = scrollElem.scrollWidth,
                    moveDistance = 0,
                    initialDistance = scrollElem.scrollLeft;

                function animationWidth() {
                    if (direction === "right") {
                        moveDistance = moveDistance + scrollElemWidth / 25;
                        scrollElem.scrollLeft = initialDistance + moveDistance;

                        if (moveDistance < scrollElemWidth / 2) {
                            requestAnimationFrame(animationWidth);
                        }
                    } else {
                        moveDistance = moveDistance - scrollElemWidth / 25;
                        scrollElem.scrollLeft = initialDistance + moveDistance;
                        if (moveDistance > -scrollElemWidth / 2) {
                            requestAnimationFrame(animationWidth);
                        }
                    }
                }
                typeof requestAnimationFrame === "function"
                    ? requestAnimationFrame(animationWidth)
                    : (scrollElem.scrollLeft = scrollElemWidth / 2);
            }

            /**
             * 判断是否有滚动条
             * @param {*} el
             * @param {*} direction
             */
            hasScrolled(el, direction = "horizontal") {
                // 判断一下overflow = hidden 情况
                let overflow =
                    (el.currentStyle && el.currentStyle.overflow) ||
                    window.getComputedStyle(el).getPropertyValue("overflow");
                if (overflow === "hidden") return false;
                if (direction === "vertical") {
                    return el.scrollHeight > el.clientHeight;
                } else if (direction === "horizontal") {
                    return el.scrollWidth > el.clientWidth;
                }
            }

            render() {
                return hotKeyboard ? (
                    <HotKeys
                        keyMap={{
                            scrollLeftHandler: ["alt+home", "alt+left"],
                            scrollRightHandler: ["alt+end", "alt+right"]
                        }}
                        handlers={{
                            scrollLeftHandler: e => {
                                // console.log(
                                //     "scrollLeft trigger",
                                //     this.getScrollParent()
                                // );
                                // document.activeElement.scrollIntoView();
                                this.scrollOnHorizontal("left");
                                e.preventDefault();
                            },
                            scrollRightHandler: e => {
                                // console.log("scrollRight trigger");
                                // document.activeElement.scrollIntoView();
                                this.scrollOnHorizontal("right");
                                e.preventDefault();
                            }
                        }}
                        ref={dom => (this.wrapped = dom)}
                        className="tree-hotkeys-wrapper"
                        {...others}
                    >
                        <WrappedComponent
                            // ref={obj => (this.wrappedComponent = obj)}
                            {...this.props}
                        />
                    </HotKeys>
                ) : (
                    <WrappedComponent
                        // ref={obj => (this.wrappedComponent = obj)}
                        {...this.props}
                    />
                );
            }
        }
        WrappedPagination.defaultProps = defaultProps;
        return WrappedPagination;
    };
}

export default hotkeys;

/*hNsiw3GmfpTzM9YJXqEkw2kI37eS3uYRkVh9ldHIvGRwHWoFSXDX/QBVFRQandV9*/
